<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码生成表编辑</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link th:href="@{/css/common/bootstrap.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/font-awesome.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/animate.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/style.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/treeSelect/treeSelectStyle.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/treeSelect/metroStyle/metroStyle.css }" th:rel="stylesheet">
    <link th:href="@{/css/fileUpload/imageUpload.css}" th:rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>代码生成表编辑</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="frm" method="post" action="">
                        <input type="hidden" id="id" name="id">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">表名：</label>
                            <div class="col-sm-8">
                                <input id="tableName" name="tableName" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">表描述：</label>
                            <div class="col-sm-8">
                                <input id="description" name="description" class="form-control" type="text">
                            </div>
                        </div>

                        <div class="form-group">
                            <ul id="parent" class="nav nav-tabs" role="tablist">
                                <li id="queryTab" class="active" role="presentation"><a href="#tab1" data-toggle="tab"
                                                                                        role="tab">查询条件</a></li>
                                <li id="listTab" role="presentation"><a href="#tab2" data-toggle="tab"
                                                                        role="tab">列表属性</a></li>
                                <li id="formTab" role="presentation"><a href="#tab3" data-toggle="tab"
                                                                        role="tab">表单属性</a></li>
                            </ul>
                            <br/>
                            <div class="tab-content">
                                <p>
                                    字段：<select id="columnList" name="columnList" style="width: 100px">
                                </select>
                                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                                    <input type="button" value="新增" onclick="addColumn()">
                                </p>
                                <div class="tab-pane active" id="tab1" role="tabpanel">
                                    <p>
                                    <table id="query" border="1">
                                        <tr>
                                            <th>字段属性</th>
                                            <th>字段名称</th>
                                        </tr>
                                    </table>
                                    </p>
                                </div>
                                <div class="tab-pane" id="tab2" role="tabpanel">
                                    <p>
                                    <table id="list" border="1">
                                        <tr>
                                            <th>字段属性</th>
                                            <th>字段名称</th>
                                        </tr>
                                    </table>
                                    </p>
                                </div>
                                <div class="tab-pane" id="tab3" role="tabpanel">
                                    <p>
                                    <table id="form" border="1">
                                        <tr>
                                            <th>字段属性</th>
                                            <th>字段名称</th>
                                        </tr>
                                    </table>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button class="btn btn-primary" type="reset" onclick="">重置</button>
                                <button class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- 全局js -->
<script th:src="@{/js/common/jquery.min.js}"></script>
<script th:src="@{/js/common/bootstrap.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/common/content.js}"></script>


<!-- 树形下拉框    -->
<script th:src="@{/js/plugins/treeSelect/treeSelect.2.0.js}"></script>
<script th:src="@{/js/plugins/zTree/jquery.ztree.all.js}"></script>
<!-- jQuery Validation plugin javascript-->
<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#frm").validate({
            rules: {
                tableName:
                    {
                        required: true
                    },

                description:
                    {
                        required: true
                    },
            },
            messages: {
                tableName:
                    {
                        required: "请输入"
                    },
                description:
                    {
                        required: "请输入"
                    },
            },
            //使用其它方式代替传统的表单提交方式
            submitHandler: function (form) {
                var object = new Object;
                object.id = $("#id").val();
                object.tableName = $("#tableName").val();
                object.description = $("#description").val();
                object.pageSets = getColumnList();
                console.log(object);
                //使用ajax提交
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: 'application/json;charset=utf-8',
                    //设置异步
                    async: false,
                    url: "/sysTable/addOrEdit",
                    //$(form).serialize(),输出序列化表单值的结果,该Api可用于AJAX 请求的data
                    data: JSON.stringify(object),
                    success: function (res) {
                        if (res.message == "ok") {
                            layer.msg("编辑成功，2秒后返回...", {time: 2000}, function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index);
                            });
                        }
                    }
                });
            }
        });
    });
</script>

<script type="text/javascript">
    function addColumn() {
        var column = $("#columnList").val();
        if (column == null || column == '') {
            layer.confirm("所选字段不能为空！", {icon: 3, title: '提示'}, null);
        } else {
            var li = $("#parent .active");
            var id = li.attr("id");
            var tr = $("<tr>");
            tr.attr("class", "zffc")
            var td = $("<td>");
            td.attr("class", "column")
            td.text(column);
            var td1 = $("<td>");
            var input = $("<input>");
            input.attr("type", "text");
            input.attr("class", "comment")
            td1.append(input);
            var td2 = $("<td>");
            var input1 = $("<input>");
            input1.attr("type", "button");
            input1.attr("value", "删除")
            input1.attr("onclick", "delColumn(this)")
            td2.append(input1)
            tr.append(td);
            tr.append(td1);
            tr.append(td2)
            $("#" + id.replaceAll("Tab", "")).append(tr);
        }
    }

    function delColumn(obj) {
        tdNode = obj.parentNode;//得到td
        trNOde = tdNode.parentNode;//得到tr
        tbNOde = trNOde.parentNode;//得到table
        tbNOde.removeChild(trNOde);
    }

    function getColumnList() {
        var list = new Array();
        list = list.concat(getColumn("query", 1));
        list = list.concat(getColumn("list", 2));
        list = list.concat(getColumn("form", 3));
        return list;

    }

    function getColumn(name, type) {
        var list = new Array();
        var queryList = $("#" + name + " .zffc");
        for (var i = 0; i < queryList.size(); i++) {
            var object = new Object();
            object.type = type;
            object.field = $(queryList[i]).find(".column").text();
            object.comment = $(queryList[i]).find(".comment").val();
            list.push(object);
        }
        return list;
    }

    function showColumn(list, name) {
        if (list != null && list.length != 0) {
            for (var i = 0; i < list.length; i++) {
                var form;
                if(name == "query"){
                    form = $("#query")
                }else if(name == "list"){
                    form = $("#list")
                }else if(name == "form"){
                    form = $("#form")
                }
                var tr = $("<tr>");
                tr.attr("class", "zffc")
                var td = $("<td>");
                td.attr("class", "column")
                td.text(list[i].field);
                var td1 = $("<td>");
                var input = $("<input>");
                input.attr("type", "text");
                input.attr("class", "comment")
                input.val(list[i].comment)
                td1.append(input);
                var td2 = $("<td>");
                var input1 = $("<input>");
                input1.attr("type", "button");
                input1.attr("value", "删除")
                input1.attr("onclick", "delColumn(this)")
                td2.append(input1)
                tr.append(td);
                tr.append(td1);
                tr.append(td2)
                form.append(tr);
            }
        }

    }
</script>


<!--修改按钮值回显-->
<script th:inline="javascript">
    var sysTable = [[${sysTable}]];
    if (sysTable != null) {
        $("#id").val(sysTable.id);
        $("#tableName").val(sysTable.tableName);
        $("#isSync").val(sysTable.isSync);
        $("#createTime").val(sysTable.createTime);
        $("#description").val(sysTable.description);
    }
    var list = [[${columnList}]];
    for (var index in list) {
        var option = $("<option>");
        option.val(list[index].field);
        option.text(list[index].field);
        $("#columnList").append(option);
    }

    var query = [[${query}]];
    var list = [[${list}]];
    var form = [[${form}]];
    showColumn(query, "query");
    showColumn(list, "list");
    showColumn(form, "form");

</script>

</body>

</html>
